/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 18:47:50
 * @LastEditTime: 2023-07-10 22:16:53
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons';
import {
  Collapse,
  Container,
  Flex,
  IconButton,
  useDisclosure,
} from '@chakra-ui/react';
import { useScroll } from 'ahooks';

import { FC } from 'react';
import { useLocation } from 'react-router-dom';
import { ColorModeToggle } from '@tourfly/theme';

import DesktopNav from '../DesktopNav';
import LanguagePicker from '../LanguagePicker';
import MobileNav from '../MobileNav';
import UserMenu from '../UserMenu';

import Logo from '@/common/components/Logo';
interface PropTypes {
  brandText?: string;
  variant?: string;
  secondary?: boolean;
  fixed?: boolean;
  onOpen?: any;
  [k: string]: any;
}

const WithSubNavigation: FC<PropTypes> = (props) => {
  // const navigator = useNavigate();
  const scroll = useScroll(document);
  const { isOpen, onToggle } = useDisclosure();
  const { fixed, secondary } = props;
  const { pathname } = useLocation();
  let navbarFilter = 'none';
  let navbarBackdrop = 'none';
  let navbarShadow = 'none';
  let navbarBg = 'none';
  let navbarBorder = 'transparent';

  if (fixed === true && scroll?.top) {
    navbarShadow = '0px 7px 23px rgba(0, 0, 0, 0.05)';
    navbarBg =
      'linear-gradient(rgba(255, 255, 255, 0) 0% rgba(255, 255, 255, 0.39) @ 100%)';
    navbarBorder = 'rgba(226, 232, 240, 0.3)';
    navbarFilter = 'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))';
    navbarBackdrop = 'blur(42px)';
  }

  if (secondary) {
    navbarBackdrop = 'blur(42px)';
  }
  const useContainer = false;
  const hiddenUser = pathname.indexOf('profile') >= 0;
  return (
    <Flex
      position={fixed ? 'fixed' : 'relative'}
      boxShadow={navbarShadow}
      bg={navbarBg}
      borderColor={navbarBorder}
      filter={navbarFilter}
      backdropFilter={navbarBackdrop}
      transitionDelay="0s, 0s, 0s, 0s"
      transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
      transition-property="box-shadow, background-color, filter, border"
      transitionTimingFunction="linear, linear, linear, linear"
      align="center"
      justify="center"
      minH="75px"
      width="100%"
      zIndex={10}
    >
      <Container maxW={useContainer ? '8xl' : 'full'}>
        <Flex
          color="base.300"
          width="100%"
          h="75px"
          align="center"
          justify="center"
        >
          <Flex w={{ base: '5rem', md: '14rem' }}>
            <Logo />
          </Flex>

          <Flex flex={{ base: 1, md: 'auto' }} flexGrow={1} justify="center">
            <DesktopNav />
          </Flex>

          <Flex align="center" justify="end" w={{ base: '14rem', md: '14rem' }}>
            <LanguagePicker />
            <ColorModeToggle />
            {/* 移动端 */}
            <Flex display={{ base: 'flex', md: 'none' }}>
              <IconButton
                onClick={onToggle}
                icon={
                  isOpen ? (
                    <CloseIcon w={3} h={3} />
                  ) : (
                    <HamburgerIcon w={5} h={5} />
                  )
                }
                variant="ghost"
                aria-label="Toggle Navigation"
              />
            </Flex>
            {/* userinfo */}
            {!hiddenUser && <UserMenu />}
          </Flex>
        </Flex>
        <Collapse in={isOpen} animateOpacity>
          <MobileNav />
        </Collapse>
      </Container>
    </Flex>
  );
};

export default WithSubNavigation;
